import React from 'react';
import { Modal, Form, Select, Input, Radio } from 'antd';
import { useEffect } from 'react';
const CreateModal = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  const formItemLayout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const rangeOptions = [
    {
      label: '所有范围',
      value: '0',
    },
    {
      label: '省厅',
      value: '1',
    },
    {
      label: '其他单位',
      value: '2',
    },
  ];
  const typeOptions = [
    {
      label: '冻结',
      value: '0',
    },
    {
      label: '活动',
      value: '1',
    },
  ];
  useEffect(() => {
    if (visible) {
      form.setFieldsValue({
        rangeType: '0',
      });
    }
  }, [visible]);
  return (
    <Modal
      visible={visible}
      title="新增角色"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      maskClosable={false}
      destroyOnClose
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            onCreate(values);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        {...formItemLayout}
        name="form_in_modal"
        preserve={false}
      >
        <Form.Item
          label="名称"
          name="name"
          rules={[{ required: true, message: '请输入名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="描述"
          name="info"
          rules={[{ required: true, message: '请输入描述' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item label="作用范围" name="rangeType">
          <Select options={rangeOptions}></Select>
        </Form.Item>
        <Form.Item
          label="类型"
          name="state"
          rules={[{ required: true, message: '请选择类型' }]}
        >
          <Radio.Group options={typeOptions}></Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateModal;
